<template>
    <div>
        <div class="time">
            <span>时间范围</span>
            <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary">查询</el-button>
        </div>

        <div ref="tb" class="tb"></div>
    </div>
</template>

<script>

import * as echarts from 'echarts';
  export default {
    data() {
      return {
        value1: '',
      };
    },

     mounted() {
        const myChart = echarts.init(this.$refs.tb);
        // 绘制图表
        myChart.setOption({
            title: {
    text: '商品统计',
    left:10,
    top:10
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '邮件营销',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接访问',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
           
        });
        // 根据窗口变化图标自适应
        window.onresize=function(){
            myChart.resize()
        }
    },

    // 声明周期函数
    destroyed(){
        window.onresize=null//组件销毁时去除resize事件
    }
  };
</script>

<style lang="less" scoped>
.time {


    span {
        color: #858585;
        margin-right: 5px;
    }

    vertical-align: middle;

    button {
        margin-left: 15px;
        border: 0;
    }
    
}
.tb{
        width: 100%;
        height: 600px;
        margin-top: 30px;
        background-color: #fff;
    }
</style>